import React, { Component } from 'react';
import './App.css';
import Header from './components/header';
import LeftBox from './components/leftBox';
import RightBox from './components/rightBox';
import DeskTop from './components/deskTop';
import $ from  'jquery';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      type: 'design',
      clientX: 0,
      clientY: 0,
      svgMessage: {},
      code: ''
    }
  };

  componentWillMount() {
    this.bodyMosedown();
    this.bodyMousemove();
  }

  bodyMosedown = () => {
    $('#body').mousedown((e) => {
      e.preventDefault();
    });
  }

  bodyMousemove = () => {
    $('#body').mousemove((e) => {
      // console.log(e.clientY);
      e.preventDefault();
      if(!document.getElementById('moveIng')) return;
      this.setState({
        clientX: e.clientX,
        clientY: e.clientY
      });
      $('#moveIng').css({
        left: e.clientX,
        top: e.clientY,
        'display': 'block'
      });
    });
  }
  
  accpetType = (item) => {
    this.setState({
      type: item
    });
  }

  accpetSvg = (item) => {
    this.setState({
      svgMessage: item
    });
  }

  onSaveCode = () => {

  }

  onSave = (code) => {
    this.setState({
      code
    });
  }

  render() {
    const { type, clientX, clientY, svgMessage} = this.state;
    return (
      <div className="App">
        <Header accpetType={this.accpetType} onSaveCode={this.onSaveCode}/>
        <LeftBox accpetSvg={this.accpetSvg}/>
        <RightBox/>
        <DeskTop type={type} clientX={clientX} clientY={clientY} readySvg={svgMessage} onSave={this.onSave}/>
      </div>
    );
  }
}

export default App;
